<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>

<style>
.slidecontainer {
  width: 800px; 
}
.slider {
  width: 800px; 
}  
div.options {
    width: 250px;
    margin: 50px;
    display: inline;
}
</style>

<!-- Based on: https://github.com/timhutton/sdl-canvas-wasm -->

<body>

    <!-- Create the canvas that the C++ code will draw into -->
    <canvas id="canvas" oncontextmenu="event.preventDefault()"></canvas>

    <p>
      <div class="options" id="link_simd_threads"><a href="index.html?simd&threads">multi-threaded SIMD</a></div>
      <div class="options" id="link_simd"><a href="index.html?simd">single-threaded SIMD</a></div>
      <div class="options" id="link_threads"><a href="index.html?threads">multi-threaded scalar</a></div>
      <div class="options" id="link"><a href="index.html">single-threaded scalar</a></div>
    </p>

    <p>Note that for any mode other than single-threaded scalar to work, you may need to turn on experimental web assembly features in your browser. In chrome this can be done in chrome://flags</p>
    
    <p id="runtime">Runtime: </p>

    <div class="slidecontainer" id="threads_div">
      Threads:  <output id="show_threads" name="show_threads" for="threads">8</output>
      <input type="range" min="1" max="32" value="8" class="slider" id="threads"
             oninput="show_threads.value=threads.value">
    </div>
    
    <!-- Workaround for cross-origin isolation, see
      https://developer.chrome.com/blog/enabling-shared-array-buffer/
      https://dev.to/stefnotch/enabling-coop-coep-without-touching-the-server-2d3n
     -->
    <script type='module' src="./main.js">
    </script>

    <!-- Allow the C++ to access the canvas element --> 
    <script type='text/javascript'>
        var Module = {
            canvas: (function() { return document.getElementById('canvas'); })(),
        };
    </script>
   
    <!-- Add the appropriate javascript glue code as generated by Emscripten -->
    <script type='text/javascript'>
      var s = document.createElement('script');
      const urlParams = new URLSearchParams(window.location.search);
      if (urlParams.has('simd')) {
          if (urlParams.has('threads')) {
              document.getElementById('link_simd_threads').style.backgroundColor='lightgray';
              s.setAttribute('src', 'js/index_simd_threads.js');
          } else {
              document.getElementById('link_simd').style.backgroundColor='lightgray';
              s.setAttribute('src', 'js/index_simd.js');
          }
      } else {
          if (urlParams.has('threads')) {
              document.getElementById('link_threads').style.backgroundColor='lightgray';
              s.setAttribute('src', 'js/index_threads.js');
          } else {
              document.getElementById('link').style.backgroundColor='lightgray';
              s.setAttribute('src', 'js/index.js');
          }
      }
      document.body.appendChild(s);
      if (!urlParams.has('threads')) {
          document.getElementById('threads_div').style.display = 'none';
          document.getElementById('threads').value = '1';
      }                                     
    </script>
    
</body>

</html>
